<template>
    <div class="all">
		<mt-header title="修改手机号码" style="font-size:18px">
		  <router-link to="/" slot="left">
		    <mt-button icon="back"  style="font-size:16px">返回</mt-button>
		  </router-link>
		</mt-header>
		
		<div class="bigbox-info" >
			<mt-field label="证件类型" placeholder="请输入手机号" is-link>
				 <span class="id" @click="check">身份证</span>
			</mt-field>
			<mt-field label="证件号码" placeholder="请输入手机号" ></mt-field>
			
		    <mt-field label="新手机号码" placeholder="请输入短信验证码" >
		    	<mt-button size="small" type="primary">发送验证码</mt-button>
		    </mt-field>
		    <mt-field label="验证码" placeholder="请输入手机号" ></mt-field>
		    <mt-cell title="验证码错误" class="yzm"></mt-cell>
		    
		    <router-link to="./" slot="left">
				<mt-button size="large" type="primary">确定</mt-button>
			</router-link>
	    </div>	 
	    
	    <mt-actionsheet
			:actions="actions"
			v-model="sheetVisible">
		</mt-actionsheet>
	    
	</div>
</template>

<script>
	export default {
	  name: 'UpdatePhone',
	  data () {
      return {
      	    actions: [
	      	        {"name": "证件类型"}, 
			        {"name": "身份证", method : this.getId},
			        {"name": "军人证", method : this.getJr},
			        {"name": "护照", method : this.getPassport},
			        {"name": "签证", method : this.getVisa},
			        {"name": "港澳通行证", method : this.getHK},
		            ],
     		sheetVisible: false
	    }
	  },
	  methods:{
		check(){
			this.sheetVisible = true;
		},
		getId(){
	      console.log("身份证")
	    },
	    getJr(){
	      console.log("军人证")
	    },
	    getPassport(){
	      console.log("护照")
	    },
	    getVisa(){
	      console.log("签证")
	    },
	    getHK(){
	      console.log("港澳通行证")
	    }

  }
}
</script>

<style>
	.all{
		font-size: 16px;
	}
	.bigbox-info{
		width: 90%;
		margin-left: 5%;
	}
	.mint-button--large{
		margin-top: 15%;
	}
	.mint-field .mint-cell-title{
		margin-left: -20px;
	}
	.mint-cell{
	    min-height: 48px;
	    border-bottom: 1px solid #eee;
    }
    .yzm{
    	margin-left: -23%;
    	color: orange;
    }
	.id{
		background-image: url(../../../static/img/go.png);
		background-repeat: no-repeat;
	    background-size: 20%;
	    background-position: 80px 3px;
	    display: inline-block;
	    height: 25px;
	    line-height: 25px;
	    width: 100px;
	}
	.mint-button--small{
		padding: 0 4px;
		margin-right: -10px;
	}
</style>